<template>
  <div class="oriderDetails">
    <!-- eslint-disable -->
    <Scroll ref="scroll" @infiniteScroll="getMallResell($event)"  :scroll-more="true">
      <ul class="content">
        <li  v-for="(item, index) in aMalldata" :key="index">
          <p class="time">{{item.createdOrderTime}}</p>
          <div class="main">
            <img class="picItem" :src="item.thumbnail | ImgFilter" alt="img">
            <div class="text">
              <p>{{item.productName}}</p>
              <p>抢购价:￥{{item.orderMoney}}</p>
              <p>原价: <span>￥{{item.price}}<i></i></span></p>
            </div>
          </div>
          <p class="footText"><span>折扣达人：{{item.nickName}}</span><span>{{item.depositRatio}}%定金抢得</span></p>
        </li>
      </ul>
    </Scroll>
    <v-Footer ref="footerRef" />
  </div>
</template>
<script>
import Ajax from "@/mixins/ajax";
import vFooter from "~/footer/index.vue";
import { Scroll } from "~/vScroll";

// 收获地址列表
const amanUrl = "/card-service-web/onePercent/winer";

export default {
  name: "aMan",
  mixins: [Ajax],
  components: {
    Scroll,
    vFooter
  },
  data() {
    return {
      aMalldata: []
    };
  },
  // 页面进入
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 更新IScroll尺寸
      vm.$nextTick(() => {
        vm.$refs.scroll.refresh();
      });
    });
  },
  mounted() {
    /* eslint-disable */
    const footerEl = this.$refs.footerRef.$el;
    const windowHeight = this.getHeight();
    const headerEl = document.querySelector("#header");
    const headerElHeight = this.getElHeight(headerEl);
    const footerElHeight = this.getElHeight(footerEl);
    this.mainHeight = windowHeight - (headerElHeight + footerElHeight);
    this.getMallResell();
  },
  methods: {
    getMallResell(reload) {
      if (reload) {
        this.currentPageNo = 0;
      }
      /* eslint-disable */
      this.post(amanUrl, {
        pageNo: ++this.currentPageNo,
        pageSize: 20
      }).then(body => {
        if (reload) {
          this.aMalldata = body.execData;
        } else if (body.execData.length === 0) {
          --this.currentPageNo;
          this.$refs.scroll.setEndMoreText("我已经没有更多了");
        } else {
          this.aMalldata = this.aMalldata.concat(body.execData);
          // 更新IScroll尺寸
        }
        this.$nextTick(() => {
          this.$refs.scroll.refresh();
        });
      });
    }
  }
};
</script>
<style scoped>
.scroll_main {
  background: #f5f5f4;
}
.oriderDetails {
  width: auto;
  background: #fff;
}
.oriderBox {
  background: #fff;
  margin-bottom: 0.45rem;
  position: relative;
}
.yesIcon {
  background: url("../../assets/img/yesIcon.png") 0/100% 100%;
}
ul {
  height: 100%;
  width: 100%;
}
ul li {
  background: #fff;
  margin-top: 0.35rem;
}
.time {
  padding-left: 0.5rem;
  line-height: 1.15rem;
  border-bottom: solid 1px #ccc;
}
.main {
  padding: 0.36rem;
  padding-bottom: 2.36rem;
}
.main img {
  width: 2rem;
  height: 2rem;
  float: left;
  margin-right: 0.25rem;
}
.text {
  float: left;
}
.text p {
  line-height: 0.7rem;
}
.text p:nth-child(1) {
  font-size: 0.45rem;
}
.text p:nth-child(3) {
  color: #7c7c7c;
}
.text p:nth-child(3) span {
  position: relative;
}
.text p:nth-child(3) span i {
  height: 2px;
  background: #7c7c7c;
  width: 100%;
  display: block;
  position: absolute;
  top: 0.2rem;
  right: 0;
}
.footText {
  padding-left: 0.5rem;
  height: 1.15rem;
  line-height: 1.15rem;
  border-top: solid 1px #ccc;
  padding-left: 0.5rem;
  background: #fff;
  display: block;
}
.footText span:nth-child(1) {
  float: left;
}
.footText span:nth-child(2) {
  float: right;
  color: #d11463;
  margin-right: 0.5rem;
}
</style>
